<template>
    <view class="content">
        <view class="box">
            <view class="add-text">
                <text class="add-icon">地址</text>
                <text class="add">高新区硅谷大街与荷园路交汇安联国际B座10楼1043室</text>
            </view>
            <view class="u-flex">
                <view class="add-name">张女士</view>
                <view class="add-tel">13100001111</view>
            </view>
        </view>
		
		<view class="box" v-for="(item, index) in 2" :key="index">
			<view class="box-no">订单编号 220152255228269823</view>
			<view class="item">
				<image src="/static/del/5.png" class="img"></image>
				<view class="item-right">
					<view class="name">销售实战派-85节实战秘籍销售实战派-85节实战秘籍</view>
					<view class="sub">共86节</view>
					<view class="item-d">
						<view class="price">
							￥<text class="price-num">2690</text>
						</view>
						<view>x1</view>
					</view>
				</view>
			</view>
			
			<!-- 课程链接 -->
			<view class="link">
				<view class="link-bg u-flex">
					<image src="../../static/icon/link_2.png" class="link-2"></image>
					<view class="link-add">
						<view>上课链接：</view>
						<view>https://huaban.com/boards/75607087</view>
					</view>
				</view>
				
				<view class="link-bg">
					<view class="link-btn">
						<image src="../../static/icon/link.png" class="link-icon"></image>
						<view>获取课程链接</view>
					</view>
				</view>
				<view class="tip">
					<image src="/static/icon/tip.png" mode=""></image>
					<view>提示：获取课程链接后不可以取消订单退款</view>
				</view>
			</view>
			
			<view>
				<view class="name">赠送书籍</view>
				<view class="gift" v-for="(el, ind) in 2" :key="ind">
					<image src="/static/del/18.png" class="g-img" mode="aspectFit"></image>
					<view>
						<view class="g-item-t">
							<view class="gift-icon">赠</view>
							<view class="g-name">三本随课程赠送书籍三本随课程赠送书籍三本随课程赠送书籍</view>
						</view>
						<view class="g-down">
							<view>赠品免费</view>
							<view>x1</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="box x-total">
			共3件商品，小计金额：
			<text>￥</text>
			<text class="t-price">69.38</text>
		</view>
		
		<view class="box">
			<view class="sub-item">
				<view>商品总额</view>
				<view>￥199.00</view>
			</view>
			<view class="sub-item">
				<view>配送</view>
				<view>线上发放+快递</view>
			</view>
			<view class="sub-item">
				<view>运费</view>
				<view>包邮</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="box">
		    <view class="o-item">
		        <view class="o-item-left">订单编号</view>
		        <view class="o-item-right">
		            <view class="num">{{ data.order_no }}</view>
		            <view class="copy" @click="copy(data.order_no)">复制</view>
		        </view>
		    </view>
		    <view class="o-item">
		        <view class="o-item-left">下单时间</view>
		        <view class="o-item-right">{{ data.create_time_date }}</view>
		    </view>
			<view class="o-item">
			    <view class="o-item-left">支付方式</view>
			    <view class="o-item-right">微信支付</view>
			</view>
			<view class="o-item">
			    <view class="o-item-left">付款时间</view>
			    <view class="o-item-right">2021-12-16 11:02</view>
			</view>
			<view class="o-item">
			    <view class="o-item-left">发货时间</view>
			    <view class="o-item-right">2021-12-16 11:02</view>
			</view>
			<view class="o-item">
			    <view class="o-item-left">完成时间</view>
			    <view class="o-item-right">2021-12-16 11:02</view>
			</view>
		</view>
		<!-- 售后信息 -->
		<view class="box">
			<view class="o-item">
			    <view class="o-item-left">申请售后</view>
			    <view class="o-item-right">2021-12-16 11:02</view>
			</view>
			<view class="o-item2">
			    <view class="o-item-left">售后原因</view>
			    <view class="u-flex-1">
					<view class="sh-text">售后原因内容展示售后原因内容展示售后原因内容展示</view>
					<view class="sh-text2">备注内容展示备注内容展示备注内容展示备注内容展示</view>
					<view class="img-box">
						<image v-for="(el, ind) in 4" :key="ind" src="@/static/del/5.png"></image>
					</view>
				</view>
			</view>
			<view class="o-item">
			    <view class="o-item-left">快递公司</view>
			    <view class="o-item-right">韵达快递</view>
			</view>
			<view class="o-item">
			    <view class="o-item-left">快递单号</view>
			    <view class="o-item-right">6565648787989562515</view>
			</view>
		</view>
		
		<view class="box">
			<view class="o-item">
			    <view class="o-item-left">平台审核</view>
			    <view class="sh-text3">审核失败</view>
			</view>
			<view class="o-item2">
			    <view class="o-item-left">审核原因</view>
			    <view class="sh-text3">原因内容个展示原因内容个展示</view>
			</view>
		</view>
		
		
		<view class="footer">
			<view>
				<view>
					￥<text class="t-price">69.38</text>
				</view>
				<view>实付金额</view>
			</view>
			<view class="u-flex">
				<view class="btn1" @click="toCancel">取消订单</view>
				<!-- <view class="btn2">立即支付</view> -->
				<view class="btn1" @click="toExpress">完善快递信息</view>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        },
        onLoad() {
            
        },
        methods: {
			// 完善快递信息
			toExpress() {
				this.$gTo(`./write?id=${this.id}`)
			},
			
			// 取消订单
			toCancel() {
				this.$gTo(`./cancel?id=${this.id}`)
			},
			
            getData() {
            	this.$ajax('order_detail', {
            		userToken: this.$getSync('userToken'),
                    id: this.id,//订单编号
            	}).then(ret => {
            		if (ret.status == 0) {
            			this.data = ret.data
                        this.isShow = true
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            //复制订单编号
            copy(order_no) {
                uni.setClipboardData({
                    data: order_no,
                    success: function() {
                        console.log('success');
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
	
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding: 18rpx 18rpx 60px;
	}
	.box{
	    background-color: #fff;
		padding: 40rpx 25rpx;
	    border-radius: 20rpx;
	    margin-bottom: 20rpx;
	}
	.add-text{
	    padding-bottom: 10rpx;
	}
	.add-icon{
	    vertical-align: middle;
	    padding: 4rpx 12rpx;
	    font-size: 18rpx;
	    color: #fff;
	    background-color: #f76d0a;
	    border-radius: 6rpx;
	    margin-right: 10rpx;
	}
	.add{
	    vertical-align: middle;
	    font-size: 36rpx;
	    font-weight: bold;
	}
	.add-name{
	    color: #8a8a8a;
	    font-size: 28rpx;
	    max-width: 380rpx;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	.add-tel{
	    color: #8a8a8a;
	    font-size: 28rpx;
	    padding-left: 30rpx;
	}
	
	
	
	
	.box-no{
		font-size: 26rpx;
		padding-bottom: 30rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding-bottom: 20rpx;
	}
	.img{
		width: 180rpx;
		height: 180rpx;
		border: 2rpx solid #e6e6e6;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	.item-right{
		flex: 1;
		padding-bottom: 35rpx;
	}
	.name{
		font-size: 30rpx;
		font-weight: bold;
		padding-top: 8rpx;
		width: 465rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.sub{
		font-size: 26rpx;
		color: #7d7d7d;
		padding-top: 6rpx;
		width: 465rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.item-d{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 18rpx;
	}
	.price{
		font-size: 24rpx;
	}
	.price-num{
		font-size: 32rpx;
		font-weight: bold;
	}
	
	
	.gift{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 18rpx;
	}
	.g-img{
		width: 127rpx;
		height: 127rpx;
		border-radius: 10rpx;
		padding: 8rpx;
		margin-right: 20rpx;
		border: 2rpx solid #e3e3e3;
		overflow: hidden;
	}
	.g-item-t{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.gift-icon{
		width: 29rpx;
		height: 29rpx;
		font-size: 20rpx;
		color: #fff;
		text-align: center;
		line-height: 29rpx;
		background-color: #fe4a26;
		border-radius: 6rpx;
		margin-right: 4rpx;
	}
	.g-name{
		font-size: 30rpx;
		font-weight: bold;
		line-height: 1;
		width: 485rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.g-down{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		padding-top: 18rpx;
	}
	
	.link{
		padding-bottom: 25rpx;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.link-bg{
		padding: 20rpx;
		background-color: #f5f9fb;
		border-radius: 15rpx;
	}
	.link-btn{
		width: 424rpx;
		height: 71rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #2558ab;
		border-radius: 15rpx;
		font-size: 30rpx;
		color: #fff;
		margin: auto;
	}
	.link-icon{
		width: 29rpx;
		height: 30rpx;
		margin-right: 16rpx;
	}
	.link-2{
		width: 66rpx;
		height: 66rpx;
		margin-right: 20rpx;
	}
	.link-add{
		flex: 1;
		font-size: 26rpx;
		color: #0071f6;
		word-break: break-all;
		white-space: pre-line;
	}
	.tip{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #fe4a26;
		padding-top: 12rpx;
	}
	.tip>image{
		width: 30rpx;
		height: 30rpx;
		margin-right: 16rpx;
	}
	
	.x-total{
		font-size: 26rpx;
		color: #636363;
		text-align: right;
	}
	.x-total>text{
		color: #000;
	}
	.t-price{
		font-size: 40rpx;
		font-weight: bold;
		color: #000;
	}
	.sub-item{
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
	}
	.sub-item:last-child{
		padding-bottom: 0;
	}
	
	
	
	.o-item{
	    display: flex;
	    justify-content: flex-start;
	    align-items: center;
	    font-size: 24rpx;
	    padding-bottom: 15rpx;
	}
	.o-item2{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 24rpx;
	}
	.o-item:last-child{
		padding-bottom: 0;
	}
	.o-item-left{
	    padding-right: 25rpx
	}
	.o-item-right{
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    flex: 1;
	}
	.num{
	    width: 425rpx;
	    word-break: break-all;
	    white-space: pre-line;
	}
	.copy{
	    width: 92rpx;
	    height: 45rpx;
	    color: #d39f78;
	    font-size: 22rpx;
	    border: 2rpx solid #d39f78;
	    border-radius: 50rpx;
	    text-align: center;
	    line-height: 45rpx;
	}
	
	.sh-text{
		font-weight: bold;
		word-break: break-all;
		white-space: pre-line;
	}
	.sh-text2{
		word-break: break-all;
		white-space: pre-line;
		padding-top: 10rpx;
	}
	.sh-text3{
		color: #fe4a26;
		word-break: break-all;
		white-space: pre-line;
	}
	.img-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.img-box>image{
		width: 170rpx;
		height: 170rpx;
		border-radius: 10rpx;
		margin-top: 10rpx;
		margin-right: 10rpx;
	}
	
	
	
	.footer{
		width: 750rpx;
		height: 105rpx;
		background-color: #fff;
		padding: 0 20rpx 0 25rpx;
		border-top: 2rpx solid #e6e6e6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #636363;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9;
	}
	.btn1{
		font-size: 28rpx;
		color: #000;
		padding: 10rpx 22rpx;
		border-radius: 50rpx;
		border: 2rpx solid #dcdcdc;
		box-sizing: border-box;
		margin-left: 20rpx;
	}
	.btn2{
		font-size: 28rpx;
		color: #fff;
		padding: 10rpx 22rpx;
		border-radius: 50rpx;
		background-color: #2558ab;
		margin-left: 20rpx;
	}

</style>
